<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <style>
        /* 页面整体样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            max-width: 800px; /* 设置最大宽度 */
            margin: 0 auto; /* 居中显示 */
            padding: 20px; /* 内边距 */
            background-color: #f0f0f0; /* 背景颜色 */
        }
        /* 标题样式 */
        h1 {
            color: #333; /* 文字颜色 */
            text-align: center; /* 居中对齐 */
        }
        /* 表单样式 */
        form {
            display: flex; /* 使用弹性布局 */
            margin-bottom: 20px; /* 底部外边距 */
        }
        /* 输入框样式 */
        input[type="text"] {
            flex-grow: 1; /* 允许输入框增长 */
            padding: 10px; /* 内边距 */
            font-size: 16px; /* 字体大小 */
            border: 1px solid #ddd; /* 边框 */
            border-radius: 4px 0 0 4px; /* 圆角 */
        }
        /* 按钮样式 */
        button {
            padding: 10px 20px; /* 内边距 */
            font-size: 16px; /* 字体大小 */
            background-color: #4CAF50; /* 背景颜色 */
            color: white; /* 文字颜色 */
            border: none; /* 无边框 */
            border-radius: 0 4px 4px 0; /* 圆角 */
            cursor: pointer; /* 鼠标样式 */
        }
        /* 列表样式 */
        ul {
            list-style-type: none; /* 移除列表标记 */
            padding: 0; /* 移除内边距 */
        }
        /* 列表项样式 */
        li {
            background-color: white; /* 背景颜色 */
            margin-bottom: 10px; /* 底部外边距 */
            padding: 10px; /* 内边距 */
            border-radius: 4px; /* 圆角 */
            display: flex; /* 使用弹性布局 */
            align-items: center; /* 垂直居中对齐 */
        }
        /* 已完成项目样式 */
        .completed {
            text-decoration: line-through; /* 删除线 */
            color: #888; /* 文字颜色 */
        }
        /* 删除链接样式 */
        .delete {
            color: red; /* 文字颜色 */
            margin-left: 10px; /* 左侧外边距 */
            text-decoration: none; /* 移除下划线 */
        }
        /* 时间戳样式 */
        .timestamp {
            font-size: 0.8em; /* 字体大小 */
            color: #888; /* 文字颜色 */
            margin-left: auto; /* 自动左侧外边距，将时间戳推到右侧 */
        }
        /* 待办事项文本样式 */
        .todo-text {
            flex-grow: 1; /* 允许文本增长 */
            margin-left: 10px; /* 左侧外边距 */
        }
    </style>
</head>
<body>
    <h1>待办事项列表</h1>
    <!-- 添加新待办事项的表单 -->
    <form action="/add" method="POST">
        <input type="text" name="todo" placeholder="添加新的待办事项" required>
        <button type="submit">添加</button>
    </form>
    <!-- 待办事项列表 -->
    <ul>
        {% for todo in todos %}
            <li>
                <!-- 复选框，用于标记完成状态 -->
                <input type="checkbox" onchange="toggleTodo({{ todo.id }})" {% if todo.completed %}checked{% endif %}>
                <!-- 待办事项文本 -->
                <span class="todo-text {% if todo.completed %}completed{% endif %}">{{ todo.text }}</span>
                <!-- 创建时间 -->
                <span class="timestamp">{{ todo.created_at.replace('T', ' ') }}</span>
                <!-- 删除链接 -->
                <a href="/delete/{{ todo.id }}" class="delete">删除</a>
            </li>
        {% endfor %}
    </ul>

    <script>
        // 切换待办事项完成状态的函数
        function toggleTodo(id) {
            fetch('/toggle/' + id, {method: 'POST'})
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 如果成功，切换 completed 类
                        const todoItem = document.querySelector(`li:has(input[onchange="toggleTodo(${id})"]) .todo-text`);
                        todoItem.classList.toggle('completed');
                    }
                });
        }
    </script>
</body>
</html>